<template>
  <div class="innovationFirstPc">
    <div class="brand-innovation">
      <center-line :title="$utils.getNavName('innovationBrand')"></center-line>
      <div class="describe">{{ nav?.[0]?.description }}</div>
      <div class="frame">
        <brand-innovation
          :list="brandInnovation_list"
          v-if="$utils.getPc() == 1"
        ></brand-innovation>
      </div>
    </div>
    <div class="science" v-if="science_list.length">
      <center-line
        :title="$utils.getNavName('innovationScience')"
      ></center-line>
      <div class="describe">
        {{ nav?.[1]?.description }}
      </div>
      <div class="frame">
        <toNews :detail="science_list?.[0]" class="left">
          <img class="img" :src="science_list[0].webimages" />
          <div class="title">
            {{ science_list[0]?.name }}
          </div>
          <div class="describe">
            {{ science_list[0]?.description }}
          </div>
        </toNews>
        <div class="right">
          <toNews
            class="item"
            v-for="item in science_list.slice(1)"
            :detail="item"
            :key="item.id"
          >
            <img class="img" :src="item.webimages" />
            <div class="text">
              {{ item.name }}
            </div>
          </toNews>
        </div>
      </div>
      <router-link to="innovationScience">
        <more-detail style="margin-bottom: 100px" name="查看更多" />
      </router-link>
    </div>
    <div class="overseas">
      <center-line
        style="margin-top: 130px"
        :title="$utils.getNavName('innovationOverseas')"
      ></center-line>
      <div class="describe">
        {{ nav?.[2]?.description }}
      </div>
      <div class="frame">
        <swiper
          :slidesPerView="1"
          loop
          :autoplay="{
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }"
          :pagination="{
            el: '.swiper-pagination',
            clickable: true,
          }"
          class="swiper-container"
          v-if="overseas_list?.length > 0"
        >
          <swiper-slide v-for="item in overseas_list" :key="item">
            <toNews :detail="item" class="content">
              <img class="left" :src="item.webimages" />
              <div class="text">
                <div class="title">
                  {{ item.name }}
                </div>
                <div class="describe">
                  {{ item.description }}
                </div>
                <div class="more-box">
                  <div class="more">查看详情</div>
                  <img
                    class="ic"
                    src="../../../assets/image/home/ic_right.png"
                  />
                </div>
                <router-link to="innovationOverseas">
                  <div class="btn">查看更多</div>
                </router-link>
              </div>
            </toNews>
          </swiper-slide>

          <template #container-start>
            <div class="swiper-pagination"></div>
          </template>
        </swiper>
      </div>
    </div>
  </div>

  <div class="innovationFirstMobile">
    <div class="brand-innovation">
      <center-line :title="$utils.getNavName('innovationBrand')"></center-line>
      <div class="describe">{{ nav?.[0]?.description }}</div>
      <div class="frame">
        <brand-innovation
          :list="brandInnovation_list"
          v-if="$utils.getPc() == 2"
        ></brand-innovation>
      </div>
    </div>
    <div class="science" v-if="science_list.length">
      <center-line
        :title="$utils.getNavName('innovationScience')"
      ></center-line>
      <div class="describe">
        {{ nav?.[1]?.description }}
      </div>
      <div class="frame">
        <toNews class="left" :detail="science_list?.[0]">
          <img class="img" :src="science_list[0].mobileimages" />
          <div class="title">
            {{ science_list[0].name }}
          </div>
          <div class="describe">
            {{ science_list[0].description }}
          </div>
        </toNews>
        <div class="right">
          <toNews
            :detail="science_list?.[0]"
            class="item"
            v-for="item in science_list.slice(1)"
            :key="item.id"
          >
            <img class="img" :src="item.mobileimages" />
            <div class="text">
              {{ item.name }}
            </div>
          </toNews>
        </div>

        <router-link to="innovationScience">
          <more-detail class="more-detail" name="查看更多" />
        </router-link>
      </div>
    </div>
    <div class="overseas">
      <center-line
        style="margin-top: 50px"
        :title="$utils.getNavName('innovationOverseas')"
      ></center-line>
      <div class="describe">
        {{ nav?.[2]?.description }}
      </div>
      <div class="frame">
        <swiper
          :slidesPerView="1"
          loop
          :autoplay="{
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }"
          :pagination="{
            el: '.swiper-pagination',
            clickable: true,
          }"
          class="swiper-container"
          v-if="overseas_list?.length > 0"
        >
          <swiper-slide v-for="item in overseas_list" :key="item">
            <toNews :detail="item" class="content">
              <img class="left" :src="item.webimages" />
              <div class="text">
                <div class="title">
                  {{ item.name }}
                </div>
                <div class="describe">
                  {{ item.description }}
                </div>
                <div class="more-box">
                  <div class="more">查看详情</div>
                  <img
                    class="ic"
                    src="../../../assets/image/home/ic_right.png"
                  />
                </div>
                <router-link to="innovationOverseas">
                  <div class="btn">查看更多</div>
                </router-link>
              </div>
            </toNews>
          </swiper-slide>

          <template #container-start>
            <div class="swiper-pagination"></div>
          </template>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import brandInnovation from "../../../components/brand-innovation.vue";
import centerLine from "../../../components/center-line.vue";
import MoreDetail from "../../../components/more-detail.vue";
import toNews from "../../../components/toNews";
export default {
  components: { centerLine, brandInnovation, MoreDetail, toNews },
  data() {
    return {
      brandInnovation_list: [],
      science_list: [],
      overseas_list: [],
      nav: [],
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    /**
     * 初始化数据
     */
    async init() {
      // 发送请求
      const [brandInnovation_list, science_list, overseas_list, nav] =
        await Promise.all([
          this.$request.get("companyinno/brandInnovationSy", {
            params: {
              cid: 2,
            },
          }),
          this.$request.get("companyinno/scientificProjectSy", {
            params: {
              cid: 3,
              pagenum: 5,
            },
          }),
          this.$request.get("companyinno/importOverseaSy", {
            params: {
              cid: 4,
            },
          }),
          this.$request.get("khcommon/navigation", {
            params: {
              pid: 1,
            },
          }),
        ]);

      // 获取数据
      this.brandInnovation_list = brandInnovation_list.data;
      this.science_list = science_list.data;
      this.overseas_list = overseas_list.data;
      this.nav = nav.data;
    },
    detail(id) {
      this.$router.push({
        name: "detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .innovationFirstMobile {
    display: none;
  }

  .innovationFirstPc {
    @include fn.fluidContainer;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .brand-innovation {
      width: 1400px;
      margin-top: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .describe {
        font-size: 16px;

        font-weight: 400;
        color: #999999;
        margin-top: 22px;
      }

      .frame {
        margin-top: 51px;
        width: 100%;
      }
    }

    .science {
      // @include fn.container;
      width: 1400px;
      margin-top: 190px;

      display: flex;
      flex-direction: column;
      align-items: center;

      .frame {
        width: 1400px;
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        // gap: 20px;
        padding-bottom: 50px;
        box-sizing: border-box;

        .left {
          // width: 440px;
          // // height: 448px;
          // height: 536px;
          width: 565px;
          // height: 600px;
          background: #f9f9fa;
          box-shadow: 0px 2px 8px 0px rgba(229, 229, 229, 0.75);
          display: flex;
          flex-direction: column;

          .img {
            // width: 100%;
            // height: fn.scale(440);
            width: 565px;
            height: 317px;
            object-fit: cover;
          }

          .title {
            @include fn.title();
            margin-left: 30px;
            margin-right: 30px;
            margin-top: 20px;
          }

          .describe {
            @include fn.describe(8);
            margin-left: 30px;
            margin-right: 30px;
            margin-top: 20px;
          }
        }

        .right {
          overflow: hidden;
          width: 835px;
          // height: 448px;
          // height: 600px;
          display: flex;
          flex-wrap: wrap;
          //gap: 20px;

          .item:first-child {
            margin-top: 0px;
          }

          .item:nth-child(2) {
            margin-top: 0px;
            // margin-left: 0px;
          }

          // .item:nth-child(3) {

          //   margin-left: 0px;
          // }

          .item {
            margin-left: 24.5px;
            background: #f9f9fa;
            box-shadow: 0px 2px 8px 0px rgba(229, 229, 229, 0.75);
            display: flex;
            flex-direction: column;
            // width: 360px;
            // margin-top: 20px;
            // margin-left: 20px;
            margin-top: 24px;

            width: 393px;
            height: 296px;

            .img {
              object-fit: cover;
              width: 393px;
              height: 221px;
            }

            .text {
              box-sizing: border-box;
              @include fn.title();
              margin-top: 20px;
              margin-left: 14px;
              margin-right: 14px;
            }
          }
        }
      }

      .describe {
        margin-top: 22px;
        font-size: 16px;

        font-weight: 400;
        color: #999999;
      }
    }

    .overseas {
      @include fn.fluidContainer;
      background-size: cover;
      background-image: url("~@/assets/image/innovation/overseas-bg.jpg");
      display: flex;
      height: 900px;
      flex-direction: column;
      align-items: center;

      .describe {
        font-size: 16px;
        color: #999999;
        margin-top: 22px;
      }

      .frame {
        box-sizing: border-box;
        margin-top: 60px;
        // height: 360px;
        background: #ffffff;
        display: flex;
        align-items: center;

        .swiper-container {
          width: 1400px;
          display: flex;
          height: 100%;
          position: relative;

          .swiper-pagination {
            bottom: 36px !important;
            left: 50% !important;
            width: fit-content !important;
            z-index: 999 !important;
          }

          .swiper-wrapper {
            width: 1400px;

            .swiper-slide {
              padding: 30px;
              box-sizing: border-box;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .content {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 351px;
                // gap: 40px;

                .left {
                  width: 624px;
                  height: 351px;
                }

                .text {
                  margin-left: 40px;
                  position: relative;
                  height: 351px;
                  flex: 1;
                  width: 0;
                  display: flex;
                  flex-direction: column;

                  .btn {
                    z-index: 10;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    width: 138px;
                    height: 40px;
                    background: #ee7800;
                    border-radius: 20px;
                    color: #fff;

                    &:active {
                      background: rgba(210, 217, 236, 0.878);
                    }
                  }

                  .more-box {
                    cursor: pointer;
                    display: flex;
                    margin-top: 35px;
                    height: 20px;
                    align-items: center;

                    .more {
                      font-size: 18px;

                      font-weight: 400;
                      color: color.$base;
                      line-height: 20px;
                    }

                    .ic {
                      object-fit: fill;
                      margin-left: 10px;
                      width: 16px;
                      height: 16px;
                    }
                  }

                  .title {
                    margin-top: 20px;
                    @include fn.title();
                  }

                  .describe {
                    margin-top: 23px;
                    @include fn.describe(5);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .innovationFirstPc {
    display: none;
  }

  .innovationFirstMobile {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .brand-innovation {
      width: 100%;
      margin-top: fn.rpx(70);
      display: flex;
      flex-direction: column;
      align-items: center;

      .describe {
        font-size: fn.rpx(16);

        font-weight: 400;
        color: #999999;
        margin-top: fn.rpx(22);
      }

      .frame {
        margin-top: fn.rpx(50);
        width: 100%;
      }
    }

    .science {
      width: 100%;
      margin-top: fn.rpx(90);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .frame {
        width: 100%;
        margin-top: fn.rpx(50);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: fn.rpx(50);
        position: relative;

        .more-detail {
          margin-top: fn.rpx(50);
        }

        .left {
          width: fn.rpx(700);
          height: fn.rpx(560);
          background: #f9f9fa;
          box-shadow: 0px 2px 8px 0px rgba(229, 229, 229, 0.75);
          display: flex;
          flex-direction: column;

          .img {
            width: 100%;
            @include fn.scale(fn.rpx(700));
          }

          .title {
            @include fn.title();
            margin-left: fn.rpx(30);
            margin-right: fn.rpx(30);
            margin-top: fn.rpx(30);
          }

          .describe {
            @include fn.describe(2);
            margin-left: fn.rpx(30);
            margin-right: fn.rpx(30);
            margin-top: fn.rpx(20);
          }
        }

        .right {
          margin-top: fn.rpx(20);
          width: fn.rpx(720);
          height: fn.rpx(533);
          display: flex;
          flex-wrap: wrap;

          .item {
            margin: fn.rpx(10);
            background: #f9f9fa;
            box-shadow: 0px fn.rpx(2) fn.rpx(8) 0px rgba(229, 229, 229, 0.75);
            display: flex;
            flex-direction: column;
            width: fn.rpx(340);
            height: fn.rpx(255);

            .img {
              @include fn.scale(fn.rpx(340));
            }

            .text {
              @include fn.title();
              margin-top: fn.rpx(20);
              margin-left: fn.rpx(14);
              margin-right: fn.rpx(14);
              font-size: fn.rpx(20);
            }
          }
        }
      }

      .describe {
        margin-top: fn.rpx(22);
        font-size: fn.rpx(16);

        font-weight: 400;
        color: #999999;
      }
    }

    .overseas {
      width: 100%;
      background-size: cover;
      background-image: url("~@/assets/image/innovation/overseas-bg.jpg");
      display: flex;
      //  height: fn.rpx(900);
      flex-direction: column;
      align-items: center;

      .describe {
        font-size: fn.rpx(16);
        color: #999999;
        margin-top: fn.rpx(22);
      }

      .frame {
        margin-bottom: fn.rpx(30);
        box-sizing: border-box;
        padding: fn.rpx(30);
        width: fn.rpx(700);
        box-sizing: border-box;
        margin-top: fn.rpx(60);
        // height: fn.rpx(710);
        background: #ffffff;
        display: flex;
        align-items: center;

        .swiper-container {
          display: flex;
          height: 100%;
          position: relative;

          .swiper-pagination {
            bottom: fn.rpx(10) !important;
            left: 0 !important;
            width: fit-content !important;
            z-index: 999 !important;
          }

          .swiper-slide {
            box-sizing: border-box;
            cursor: pointer;
            display: flex;

            align-items: center;

            .content {
              display: flex;
              align-items: center;
              flex-direction: column;
              width: 100%;
              height: 100%;
              //  gap: fn.rpx(40);

              .left {
                width: fn.rpx(625);
                height: fn.rpx(355);
              }

              .text {
                margin-top: fn.rpx(20);
                position: relative;
                height: fn.rpx(250);
                width: fn.rpx(625);

                display: flex;
                flex-direction: column;

                .btn {
                  z-index: 10;
                  position: absolute;
                  right: 0;
                  bottom: fn.rpx(10);
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: fn.rpx(16);
                  width: fn.rpx(138);
                  height: fn.rpx(40);
                  background: color.$base;
                  border-radius: fn.rpx(20);
                  color: #fff;

                  &:active {
                    background: rgba(210, 217, 236, 0.878);
                  }
                }

                .more-box {
                  cursor: pointer;
                  display: flex;
                  margin-top: fn.rpx(35);
                  height: fn.rpx(20);
                  align-items: center;

                  .more {
                    font-size: fn.rpx(16);

                    font-weight: 400;
                    color: color.$base;
                    line-height: fn.rpx(20);
                  }

                  .ic {
                    object-fit: fill;
                    margin-left: fn.rpx(10);
                    width: fn.rpx(16);
                    height: fn.rpx(16);
                  }
                }

                .title {
                  @include fn.title();
                  line-height: fn.rpx(30);
                }

                .describe {
                  @include fn.describe(3);
                  line-height: fn.rpx(24);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>